<template>
  <el-form class="pro-panels" v-for="item in props.boomSlider" :key="item">
    <el-form-item label="目标对象">
      <div class="mb-2 flex items-center text-sm">
        <el-radio-group v-model="item.radio" class="ml-4">
          <el-radio label="0" size="large">场景</el-radio>
          <el-radio label="1" size="large">面板</el-radio>
        </el-radio-group>
        <el-tree-select
          v-model="item.data"
          :data="props.datas"
          multiple
          :render-after-expand="false"
          collapse-tags="true"
        />
      </div>
    </el-form-item>
    <el-form-item label="剖切参数" class="horizontal">
      <SvgIcon icon-class="logo" @click="flushed(item)" style="justify-content: flex-end" />
    </el-form-item>
    <el-form-item label="X轴">
      <div style="width: 65%">
        <el-slider
          v-model="item.boomSliderValue.boomSliderValueX"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div style="width: 35%">
        <el-input v-model="item.boomSliderValue.boomSliderValueX">
          <template #append>%</template>
        </el-input>
      </div>
    </el-form-item>
    <el-form-item label="-X轴">
      <div style="width: 65%">
        <el-slider
          v-model="item.boomSliderValue.boomSliderValue_X"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div style="width: 35%">
        <el-input v-model="item.boomSliderValue.boomSliderValue_X">
          <template #append> % </template>
        </el-input>
      </div>
    </el-form-item>
    <el-form-item label="Y轴">
      <div style="width: 65%">
        <el-slider
          v-model="item.boomSliderValue.boomSliderValueY"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div style="width: 35%">
        <el-input v-model="item.boomSliderValue.boomSliderValueY">
          <template #append> % </template>
        </el-input>
      </div>
    </el-form-item>
    <el-form-item label="-Y轴">
      <div style="width: 65%">
        <el-slider
          v-model="item.boomSliderValue.boomSliderValue_Y"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div style="width: 35%">
        <el-input v-model="item.boomSliderValue.boomSliderValue_Y">
          <template #append> % </template>
        </el-input>
      </div>
    </el-form-item>

    <el-form-item label="Z轴">
      <div style="width: 65%">
        <el-slider
          v-model="item.boomSliderValue.boomSliderValueZ"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div style="width: 35%">
        <el-input v-model="item.boomSliderValue.boomSliderValueZ">
          <template #append> % </template>
        </el-input>
      </div>
    </el-form-item>
    <el-form-item label="-Z轴">
      <div style="width: 65%">
        <el-slider
          v-model="item.boomSliderValue.boomSliderValue_Z"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
        />
      </div>
      <div style="width: 35%">
        <el-input v-model="item.boomSliderValue.boomSliderValue_Z">
          <template #append> % </template>
        </el-input>
      </div>
    </el-form-item>
    <div class="action">
      <div class="action1">
        <el-form-item label="剖切速度">
          <el-select v-model="item.boomSliderFfect" class="m-2">
            <el-option
              v-for="items in props.explosionEffects"
              :key="items.speed"
              :value="items.speed"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="action2">
        <el-form-item label="剖切效果">
          <el-select v-model="item.boomSliderSpeed" class="m-2">
            <el-option
              v-for="items in props.explosionSpeeds"
              :key="items.speed"
              :value="items.speed"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="action1">
        <el-form-item label="剖切次数">
          <el-select v-model="item.boomSliderNumber" class="m-2">
            <el-option
              v-for="items in props.explosionNumbers"
              :key="items.speed"
              :value="items.speed"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="action2">
        <el-form-item label="剖切延迟">
          <el-input v-model="item.boomSliderDelay" placeholder="请输入">
            <template #append>ms</template>
          </el-input>
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<script lang="ts" setup>

const props = defineProps({
  boomSlider: Object,
  datas: Object,
  explosionEffects: Object,
  explosionSpeeds: Object,
  explosionNumbers: Object,
});
function flushed(item) {
  item.boomSliderFfect = '1.0x';
  item.boomSliderSpeed = '缓入';
  item.boomSliderNumber = '1';
  item.boomSliderDelay = '';
  item.boomSliderValue.boomSliderValueX = 0;
  item.boomSliderValue.boomSliderValue_X = 0;
  item.boomSliderValue.boomSliderValueY = 0;
  item.boomSliderValue.boomSliderValue_Y = 0;
  item.boomSliderValue.boomSliderValueZ = 0;
  item.boomSliderValue.boomSliderValue_Z = 0;
}
const data = [
  {
    value: '1',
    label: '模型组',
    children: [
      {
        value: '1-1',
        label: 'BIM模型1',
      },
      {
        value: '1-3',
        label: 'BIM模型3',
      },
      {
        value: '1-2',
        label: 'BIM模型2',
      },
    ],
  },
  {
    value: '2',
    label: '模型G',
  },
  {
    value: '3',
    label: '模型Z',
  },
];
</script>

<style lang="less" scoped>
.action1,
.action2 {
  width: 45%;
  float: left;
}

.action2 {
  margin-left: 5%;
}

.horizontal {
  flex-direction: row !important;

  :deep(.el-form-item__content) {
    justify-content: flex-end;
  }
}
</style>
